<template>
    <div>
        <Modal v-model="modal" title="确认操作" width="20"  @on-ok="handleSubmit"   >
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card class="line-style">
            <Form ref="customForm" :model="formDate" :rules="ruleCustom" inline :label-width="100">
                <div class="line-style">
                    <div class="line-wrap">
                        <div class="line-title">在沈人员</div>
                        <div class="line-main">
                            <Row>
                                <Col span="7">
                                    <Form-item label="已返回实验" prop="hb_return_lab">
                                        <i-input type="number" number v-model="formDate.hb_return_lab"  placeholder="请输入湖北人员已返回实验数量">
                                            <span slot="append">人</span>
                                        </i-input>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="检测数量" prop="hb_check" >
                                        <i-input type="number" number v-model="formDate.hb_check" placeholder="请输入湖北人员检测数量">
                                            <span slot="append">人</span>
                                        </i-input>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="排查总数" prop="hb_pc">
                                        <i-input type="number" number v-model="formDate.hb_pc" placeholder="湖北人员排查数量">
                                            <span slot="append">人</span>
                                        </i-input>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="阳性数量" prop="hb_positive">
                                        <i-input type="number" number v-model="formDate.hb_positive" placeholder="请输入湖北人员阳性数量">
                                            <span slot="append">人</span>
                                        </i-input>
                                    </Form-item>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
                <div class="line-style">
                    <div class="line-wrap">
                        <div class="line-title">密接</div>
                        <div class="line-main">
                            <Row>
                                <Col span="7">
                                    <Form-item label="密接送检" prop="mj_sj">
                                        <i-input type="number" number v-model="formDate.mj_sj" placeholder="请输入密接送检数量">
                                            <span slot="append">人</span>
                                        </i-input>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="阳性数量" prop="mj_positive">
                                        <i-input type="number" number v-model="formDate.mj_positive" placeholder="请输入密接阳性数量数量">
                                            <span slot="append">人</span>
                                        </i-input>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="上报日期" prop="imp_date">
                                        <DatePicker @on-change="dateChange" :options="options1"  :value="formDate.imp_date" format="yyyy-MM-dd"
                                                    type="date" placeholder="选择上报日期"></DatePicker>
                                    </Form-item>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
            </Form>
            <div class="end-btn" v-if="!showDetail">
                <Button type="primary" @click="validateForm('customForm')">保存</Button>
            </div>
        </Card>

    </div>
</template>

<script>
import { insert, getById, update } from '@/api/outbreak-management/key-population/nucleic-acid-detection'

export default {
  data () {
    const validateInt = (rule, value, callback) => {
      if (value % 1 !== 0) {
        callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    return {
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      currentIndex: '',
      modal: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 街道信息
      formDate: {
        hb_return_lab: 0,
        hb_check: 0,
        hb_pc: 0,
        hb_positive: 0,
        mj_sj: 0,
        mj_positive: 0,
        imp_date: ''
      },
      ruleCustom: {
        hb_return_lab: [
          { required: true, type: 'number', message: '已返回试验必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        hb_check: [
          { required: true, type: 'number', message: '检测必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        hb_pc: [
          { required: true, type: 'number', message: '排查必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        hb_positive: [
          { required: true, type: 'number', message: '阳性必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        mj_sj: [
          { required: true, type: 'number', message: '送检必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        mj_positive: [
          { required: true, type: 'number', message: '阳性数量必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '上报日期必选', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
             * 日期格式化
             */
    dateChange (date) {
      this.formDate.imp_date = date
      // this.formList[index].imp_date = date
    },
    // 校验保存数据
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    handleSubmit () {
      let requestData = this.formDate
      if (requestData.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
            // this.$refs[name].resetFields()
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
            // this.$refs[name].resetFields()
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.id)
      }
    },
    getEditData (id) {
      getById({ id }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          this.formDate = res
          this.formDate.imp_date = this.$common.moment(res.imp_date).format('YYYY-MM-DD')
        }
        console.log(data)
      })
    }
  },
  created () {
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>

<style scoped>
    .end-btn {
        float: right
    }
    .line-wrap{
        width: 100%;
    }
</style>
